<template>
  <div>
    <el-drawer :visible="visible" direction="rtl" @close="onCloseDialog('drawer')">
      <el-tabs type="border-card">
        <el-tab-pane label="通知 (0)">
          <el-empty description="没有通知" v-if="dataOfNotices.length == 0"></el-empty>
          <div v-else>
            <div class="d-flex">
              <el-button-group>
                <el-button type="primary" size="mini" @click="onClickToolbar('create')">标记已读</el-button>
                <el-button type="danger" size="mini" @click="onClickToolbar('delete-multi')">删除</el-button>
              </el-button-group>
            </div>
            <el-table :data="dataOfNotices" stripe style="width: 100%">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <div :class="scope.row.status == 0 ? 'fw-bold' : ''">
                    {{ scope.row.title }}
                  </div>
                  <div class="d-flex justify-content-between align-items-center">
                    <div>{{ scope.row.created_at }}</div>
                    <el-button-group>
                      <el-button type="text" @click="onClickToolbar('notices-detail')">查看</el-button>
                      <el-button type="text" class="ms-2">删除</el-button>
                    </el-button-group>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="mt-2">
              <el-pagination background layout="prev, pager, next" :total="1000" :pager-count="5">
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="消息 (0)">
          <el-empty description="没有消息" v-if="dataOfNotices.length == 0"></el-empty>
          <div v-else>
            <div class="d-flex">
              <el-button-group>
                <el-button type="primary" size="mini" @click="onClickToolbar('create')">标记已读</el-button>
                <el-button type="danger" size="mini" @click="onClickToolbar('delete-multi')">删除</el-button>
              </el-button-group>
            </div>
            <el-table :data="dataOfNotices" stripe style="width: 100%">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <div :class="scope.row.status == 0 ? 'fw-bold' : ''">
                    {{ scope.row.title }}
                  </div>
                  <div>{{ scope.row.created_at }}</div>
                </template>
              </el-table-column>
            </el-table>
            <div class="mt-2">
              <el-pagination background layout="prev, pager, next" :total="1000" :pager-count="5">
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="代办 (0)">
          <el-empty description="没有代办事项" v-if="dataOfNotices.length == 0"></el-empty>
          <div v-else>
            <div class="d-flex">
              <el-button-group>
                <el-button type="primary" size="mini" @click="onClickToolbar('create')">标记已读</el-button>
                <el-button type="danger" size="mini" @click="onClickToolbar('delete-multi')">删除</el-button>
              </el-button-group>
            </div>
            <el-table :data="dataOfNotices" stripe style="width: 100%">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <div :class="scope.row.status == 0 ? 'fw-bold' : ''">
                    {{ scope.row.title }}
                  </div>
                  <div>
                    {{ scope.row.created_at }}
                    <el-link type="primary">删除</el-link>
                    <el-link type="primary">回复</el-link>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="mt-2">
              <el-pagination background layout="prev, pager, next" :total="1000" :pager-count="5">
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>

    <!-- 表单对话框 -->
    <el-dialog title="收货地址" :visible.sync="visibleOfDialog">
      <el-form :model="form">
        <el-form-item label="活动名称" label-width="120px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" label-width="120px">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/**
 * 消息面板
 * 用于首页侧边栏
 */
export default {
  name: "MessagesPanel",
  props:{
    visible:{
      type:Boolean,
      default:false,
    },
  },
  data() {
    return {
      // 通知数据
      dataOfNotices: [
        {
          id: 1,
          title: "今天大雨，大家下班早点回家",
          created_at: "2022-07-15 16:00:00",
          status: 0,
        },
        {
          id: 2,
          title: "发工资啦，520快到了，大家省点花钱",
          created_at: "2022-07-15 16:00:00",
          status: 1,
        },
      ],
      visibleOfDialog: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
    };
  },
  methods: {
    onClickToolbar(name, data) {
      switch (name) {
        case 'notices-detail':
          this.visibleOfDialog = true;
          break;
        case 'messages-detail':
          this.visibleOfDialog = true;
          break;
        case 'todos-detail':
          this.visibleOfDialog = true;
          break;
      }
    },
    onCloseDialog(name){
      console.log('关闭弹窗',name);
      this.$emit('update:visible',false)
    }
  }
};
</script>

<style>
</style>